<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" th:with="title='商品分类管理',active='cate'">
<head th:replace="/manage/header::headerFragment(title,active)"></head>
<body>
<div th:replace="/manage/header::header-body"></div>

<div class="row">
  <div class="col-2">
    <div th:replace="/manage/leftnav::leftnav"></div>
  </div>

  <div class="col-10">
    <form role="form" action="/scenicSpot/submitUpdateScenicSpot" method="post" enctype="multipart/form-data" onsubmit="return validateForm()">
      <div class="form-group">
        <input type="hidden" class="form-control" id="scenicspot_id" name="scenicspot_id" th:value="${scenicSpot.scenicspot_id}">
        <label for="scenicspot_name" class="col-sm-2 control-label">景点名称</label>
        <div class="col-sm-10">
          <input type="text" class="form-control" id="scenicspot_name" placeholder="请输入景点名称"
                 th:value="${scenicSpot.scenicspot_name}" name="scenicspot_name" />
        </div>
      </div>

      <div class="mb-3 mt-3">
        <label for="scenicspot_addr" class="col-sm-2 control-label">景点地址</label>
        <input type="text" class="form-control" id="scenicspot_addr"
               th:value="${scenicSpot.scenicspot_addr}" name="scenicspot_addr" placeholder="请输入景点地址"/>
      </div>

      <div class="mb-3 mt-3">
        <label for="scenicspot_introduce" class="col-sm-2 control-label">景点介绍</label>
        <textarea class="form-control" id="scenicspot_introduce"
                  th:text="${scenicSpot.scenicspot_introduce}" name="scenicspot_introduce"></textarea>
      </div>

      <div class="mb-3 mt-3">
        <label for="scenicspot_img" class="col-sm-2 control-label">景点图片</label>
        <input type="file" class="form-control" id="scenicspot_img" name="fileUpload" />
        <img th:src="@{${scenicSpot.scenicspot_img}}" alt="当前景点图片" style="margin-top: 10px; width: 100px; height: 100px;">
      </div>

      <button type="submit" class="btn btn-primary">提交</button>
    </form>
  </div>
</div>

<script>
  function validateForm() {
    var name = document.getElementById("scenicspot_name").value;
    var addr = document.getElementById("scenicspot_addr").value;
    var introduce = document.getElementById("scenicspot_introduce").value;
    var img = document.getElementById("scenicspot_img").value;

    if (name.trim() === "") {
      alert("景点名称不能为空");
      return false;
    }

    if (addr.trim() === "") {
      alert("景点地址不能为空");
      return false;
    }

    if (introduce.trim() === "") {
      alert("景点介绍不能为空");
      return false;
    }

    if (img.trim() === "") {
      alert("请上传景点图片");
      return false;
    }

    return true;
  }
</script>

</body>
</html>
